<template>
    <div class='header'>
      
      <span>个人中心</span>
      
    </div>
    <div class="user">
      <div class="info" style="width: 100%; max-width: 100%;"> <!-- 设置宽度和最大宽度为1000px -->
        <el-card class="box-card" style="width: 100%; height: auto;"> <!-- 设置卡片宽度为100%，高度自动 -->
          <el-row>
            <el-col :span="8">
              <img alt="" class="img" src="../assets/logo.svg">
            </el-col>
  
            <el-col :span="8">
            
                <el-descriptions column="1" :model="form" >
      <el-descriptions-item label="姓名">{{form.name}}</el-descriptions-item>
      <el-descriptions-item label="电话">{{form.phone}}</el-descriptions-item>
    </el-descriptions>
             
            
            </el-col>
            <el-col :span="8">
              <el-icon size="20px" style="margin:0 20px;">
                <router-link to="/updateuser">
                  <Tools/>
                </router-link>
              </el-icon>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  
  
    <div class="other">
      <div class="item">
        <el-icon size="20px" style="margin:0 20px;">
          <Avatar/>
        </el-icon>
        <router-link to="/mytrip">我的行程</router-link>
      </div>
      <div class="item">
        <el-icon size="20px" style="margin:0 20px;">
          <Clock/>
        </el-icon>
        <router-link to="/historytrip">历史行程</router-link>
      </div>
      <div class="item">
        <el-icon size="20px" style="margin:0 20px;">
          <Comment/>
        </el-icon>
        <span>消息中心 </span>
      </div>
      <div class="item" style="display: flex; justify-content: flex-end;">
    <el-button type="danger" @click="Logoutoflogin">退出登录</el-button>
  </div>
      
    </div>
  </template>
  <script setup>
import { ref } from 'vue'

import request from "@/utils/request";
import { useRouter } from 'vue-router';
// form表单
const form = ref({
  name: "",
  phone: ""

})
const add =()=>{
  form.value=userInfo.value
}

const userInfo = ref({});
const parseUserInfo = () => {
  const originalString = localStorage.getItem("user")
  var newStr = originalString.substring(0, originalString.length - 1); // 从索引12开始，截取到字符串末尾的前一个字符，即去掉 "]"
  // 去掉字符串两侧的空格，并替换其中的等号和单引号为对应的JSON字符
  var newStr = newStr.replace(/=/g, ':').replace(/'/g, '"');
  // 在字符串开头和结尾添加大括号，使其成为一个完整的JSON对象
  let pairs = newStr.split(", ");
  let jsonObj = {};
  for (let i = 0; i < pairs.length; i++) {
    let keyValuePair = pairs[i].split(":");
    jsonObj[keyValuePair[0]] = keyValuePair[1];
  }
  let jsonStr = JSON.stringify(jsonObj);
  userInfo.value = JSON.parse(jsonStr);
  console.log(userInfo.value);
}
const Logoutoflogin =()=>{
  localStorage.clear();
  location.reload();
}


parseUserInfo();
add()
  </script>
  <style lang='less' scoped>
    .header {
      text-align: center;
      background-color: #BDDCFF;
      height: 60px;
      line-height: 60px;
      color: #495e77;
    
    }
    
    .user {
      margin: 10px 20px;
      display: flex;
      border: 2px solid #ccc;
      border-radius: 6px;
    
      .img {
        width: 90px;
        margin: 5px;
        margin-right: 30px;
      }
    
      .info {
        line-height: 20px;
      }
    }
    
    .other {
      margin: 10px 20px;
      border: 2px solid #ccc;
      border-radius: 6px;
    
      .item {
        line-height: 80px;
        border-bottom: 1px solid #D4D4D4;
    
        .el-icon {
          vertical-align: middle;
    
        }
      }
    }
    </style>
    